<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" http-equiv="refresh" content="30">
    <title>Hureka</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="plugins/elementui/index.js"></script>
</head>
<style>
    .el-header, .el-footer {
        background-color: #fffdf5;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #fffdf5;
        color: #e3e3e3;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .bg-purple {
        background: #dadce6;
    }
    .bg-purple-light {
        background: #dadce6;
    }

    .el-table .even-row {
        background: #fdd9f5;
    }

    .el-table .odd-row {
        background: #d8f9f7;
    }
</style>
<body>
<div id="app">
    <el-container>
        <el-header style="height: 120px">
            <!--<img src="img/header1.jpg" style="">-->
            <img src="img/header2.jpg" style="width: 100%">
        </el-header>
        <el-container>

                <el-main style="height: 700px">
                    <el-row>
                        <el-menu
                                :default-active="activeIndex2"
                                class="el-menu-demo"
                                mode="horizontal"
                                @select="handleSelect"
                                background-color="#545c64"
                                text-color="#fff"
                                active-text-color="#ffd04b">
                            <el-menu-item index="1"><font size="7">Hureka</font></el-menu-item>
                            <el-submenu index="2">
                                <template slot="title">我的工作台</template>
                                <el-menu-item index="2-1">选项1</el-menu-item>
                                <el-menu-item index="2-2">选项2</el-menu-item>
                                <el-menu-item index="2-3">选项3</el-menu-item>
                                <el-submenu index="2-4">
                                    <template slot="title">选项4</template>
                                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                            <el-menu-item index="3" disabled>消息中心</el-menu-item>
                            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">服务管理</a></el-menu-item>
                        </el-menu>
                    </el-row>

                    <el-row >
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                            <template>
                                <el-table
                                        ref="singleTable"
                                        :data="tableData"
                                        highlight-current-row
                                        :row-class-name="tableRowClassName"
                                        style="width: 100%">
                                    <el-table-column
                                            label="序号"
                                            type="index"
                                            width="200">
                                    </el-table-column>
                                    <el-table-column
                                            property="appName"
                                            label="服务名称"
                                            width="250">
                                    </el-table-column>
                                    <el-table-column
                                            property="port"
                                            label="端口"
                                            width="250">
                                    </el-table-column>
                                    <el-table-column
                                            property="ip"
                                            label="ip地址"
                                            width="300">
                                    </el-table-column>
                                    <el-table-column
                                            property="updateTime"
                                            label="更新时间"
                                            width="240">
                                    </el-table-column>
                                    <el-table-column
                                            property="serviceId"
                                            label="状态"
                                            width="260">
                                    </el-table-column>
                                    <el-table-column
                                            fixed="right"
                                            label="操作"
                                            width="250">
                                        <template slot-scope="scope">
                                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                            <el-button type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                            </template>
                            </div>
                        </el-col>
                    </el-row>
                </el-main>

        </el-container>
    </el-container>
</div>

</body>
<script>
    new Vue({
        el:'#app',
        data:{
            tableData: [],
            activeIndex: '1',
            activeIndex2: '1'

        },
        created(){
            axios.post("/registry/findList").then(res=>{
                this.tableData=res.data;
            })
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick(row) {
                console.log(row);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 0) {
                    return 'even-row';
                } else if (rowIndex === 1) {
                    return 'odd-row';
                }
                return '';
            }
        }

    });

</script>

</body>


</html>